<template>
    <div class="app-movie-item"  v-if="detailitem">
        <div class="top">
            <div class="detail-bg" :style="{ 'backgroundImage': 'url('+ detailbg +')' }"></div>
            <div class="detail-filter"></div>
            <div class="detail-box">
                <div class="poster">
                    <img :src="poster" alt="">
                </div>
                <div class="content">
                    <div class="title">{{ detailitem.nm }}</div>
                    <div class="title-en-name">{{ detailitem.enm }}</div>
                    <div class="score" v-if=" detailitem.sc != 0 ">
                        {{ detailitem.sc }}
                        <span class="sum">({{ detailitem.snum | snum }}人评)</span>
                    </div>
                    <div class="score" v-else>
                        <span class="sum">暂无评论</span>
                    </div>
                    <div class="type">{{ detailitem.cat }}</div>
                    <div class="scr">{{ detailitem.src }}/{{ detailitem.dur }}分钟</div>
                    <div class="pubDesc">{{ detailitem.pubDesc}}</div>
                </div>
            </div>
            <div class="arrow-g">
                <i class="fa fa-angle-right"></i>
            </div>
        </div>
        <div class="centre">
            <div class="date active">今天11月29日</div>
            <div class="date">今天11月30日</div>
            <div class="date">今天11月31日</div>
        </div>
        <div class="nav-wrap">
            <div class="item">
                全城
                <i class="fa fa-angle-down"></i>
            </div>
            <div class="item">
                品牌
                <i class="fa fa-angle-down"></i>
            </div>
            <div class="item">
                特色
                <i class="fa fa-angle-down"></i>
            </div>
        </div>
        <div class="cinema" v-if="cinemaitem" v-for="cinemaitem in cinemas" :key="cinemaitem.id">
            <div class="item">
                <div class="title-box">
                    <div class="title">
                        {{ cinemaitem.nm }}
                        <span class="price-box">
                            <span class="price">{{ cinemaitem.sellPrice }}</span>
                            <span class="q">元起</span>
                        </span>
                    </div>
                    <div class="location-box">
                        <div class="flex">{{ cinemaitem.addr }}</div>
                        <div class="distance">{{ cinemaitem.distance }}</div>
                    </div>
                    <div class="label-box">
                        <div class="allowRefund" v-if="cinemaitem.tag.allowRefund === 1">退</div>
                        <div class="endorse" v-if="cinemaitem.tag.endorse === 1">改签</div>
                        <div class="snack" v-if="cinemaitem.tag.snack === 1">小吃</div>
                        <div class="vipTag" v-if="cinemaitem.tag.vipTag === 1">折扣卡</div>
                        <div class="hallType" v-if="cinemaitem.tag.hallType">杜比全景声厅</div>
                        <div class="hallType" v-if="cinemaitem.tag.hallType">巨幕厅</div>
                    </div>
                    <div class="discount-box" v-if="cinemaitem.promotion">
                        {{ cinemaitem.promotion.cardPromotionTag }}
                    </div>
                    <div class="discount-box" v-if="cinemaitem.showTimes">
                        <div>近期场次：</div>
                        <div class="title-line">{{ cinemaitem.showTimes }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            detailitem: null,
            cinemas: null
        }
    },
    created () {
        this.$ajax.get('/my/detailmovie?movieId=' + this.$route.params.detail)
            .then(result => {
                if (result != '') {
                    console.log('获取数据成功...');
                    this.detailitem = result.data.detailMovie;
                    // console.log(this.detailitem);
                }else {
                    console.log('发生未知错误，获取数据失败...');
                }
            })
            .catch(err => {
                console.log(err);
            });
        this.$ajax.post('/my/movie?forceUpdate=' + Date.now())
            .then(result => {
                if (result.status === 200) {
                    this.cinemas = result.data.cinemas;
                    // console.log(this.cinemas);
                }
            })
            .catch(err => {
                console.log(err);
            })
    },
    computed: {
        poster () {
            return this.detailitem.img.replace(/w.h/,'148.208');
        },
        detailbg () {
            return this.detailitem.img.replace(/w.h/,'71.100');
        }
    }
}
</script>

<style lang="scss">
.app-movie-item {

    .top {
        height: auto;
        display: flex;
        align-items: center;
        position: relative;
        height: 5.013333rem;

        .detail-bg {
            position: absolute;
            z-index: -1;
            overflow: hidden;
            // background-image: url(//p0.meituan.net/71.100/movie/3e7696319c840d4890e947b926259d532809641.jpg);
            height: 5.013333rem;
            filter: blur(.5rem);
            background-size: cover;
            background-repeat: no-repeat;
        }

        .detail-filter {
            position: absolute;
            z-index: -1;
            background-color: #333;
            opacity: .45;
        }

        .detail-box {
            padding: .506667rem .8rem .506667rem .4rem;
            display: flex;

            .poster {
                width: 3.933333rem;
            }

            .content {
                padding-left: .4rem;
                overflow-x: hidden;
                color: #fff;

                .title {
                    font-size: .5rem;
                    margin-top: .026667rem;
                    font-weight: 700;
                    overflow: hidden;
                    height: auto;
                }

                .title-en-name{
                    margin-top: .133333rem;
                    font-size: .32rem;
                    opacity: .8;
                    height: auto;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                .score {
                    font-size: .48rem;
                    font-weight: 700;
                    color: #fc0;
                    margin-top: .25rem;
                    height: auto;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;

                    .sum {
                        margin-top: .266667rem;
                        font-size: .32rem;
                        color: #fff;
                        opacity: .8;
                    }
                }

                .type, .scr, .pubDesc {
                    margin-top: .2rem;
                    font-size: .32rem;
                    opacity: .8;
                    height: auto;
                }
            }
        }

        .arrow-g {
            width: auto;

            i {
                position: absolute;
                width: .266667rem;
                right: .4rem;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }

    .centre {
        height: 1.2rem;
        display: flex;

        .date {
            position: relative;
            width: 3.066667rem;
            line-height: 1.146667rem;
            margin-left: .12rem;
            font-size: .373333rem;
            text-align: center;
            color: #666;
        }

        .date.active {
            border-bottom: .053333rem solid #f03d37;
            color: #f03d37;
        }
    }

    .nav-wrap {
        height: 1.066667rem;
        z-index: 10;
        background-color: #fff;
        display: flex;
        border-bottom: .013333rem solid #b0b0b0;
        position: relative;

        .item {
            flex: 1;
            text-align: center;
            line-height: 1.066667rem;
            white-space: nowrap;
            overflow: hidden;
            font-size: .346667rem;
            text-overflow: ellipsis;
            position: relative;

            i {
                margin-left: .053333rem;
                border-top-color: #b0b0b0;
            }
        }

        div+div::before {
            content: "";
            display: block;
            position: absolute;
            height: .533333rem;
            width: .026667rem;
            top: .266667rem;
            left: 0;
            border-left: 1px solid #b0b0b0;
        }
    }

    .cinema {

        .item {
            padding: .346667rem .4rem .346667rem .4rem;
            background-color: #fff;
            position: relative;
            overflow: hidden;
            display: flex;
            border-bottom: .013333rem solid #b0b0b0;

            .title-box {

                .title {
                    height: .613333rem;
                    font-size: .426667rem;
                    color: #000;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;

                    .price-box {
                        padding-top: .24rem;
                        padding-left: .08rem;

                        .price {
                            font-size: .48rem;
                            color: #f03d37;
                        }

                        .q {
                            margin-left: .08rem;
                            font-size: .293333rem;
                            color: #f03d37;
                        }
                    }
                }

                .location-box {
                    margin-top: .16rem;
                    font-size: .346667rem;
                    color: #666;
                    display: flex;

                    .flex {
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }

                    .distance {
                        margin-left: .133333rem;
                        width: 1rem;
                    }
                }

                .label-box {
                    margin-top: .106667rem;
                    margin-bottom: .106667rem;
                    overflow: hidden;

                    .allowRefund, .endorse, .hallType {
                        width: auto;
                        color: #589daf;
                        border: 1px solid #589daf;
                        display: inline-block;
                        padding: 0 .066667rem;
                    }

                    .snack, .vipTag {
                        width: auto;
                        color: #f90;
                        border: 1px solid #f90;
                        display: inline-block;
                        padding: 0 .066667rem;
                    }

                    div+div {
                        margin-left: .133333rem;
                    }
                }

                .discount-box {
                    color: #999;
                    margin-bottom: .106667rem;
                }

                .discount-box {
                    display: flex;
                    position: relative;
                    
                    div {
                        width: 1.6rem;
                        font-size: .32rem;
                        color: #999;
                    }

                    .title-line {
                        width: auto;
                        margin-left: .373333rem;
                        position: relative;
                    }

                    div+div::before {
                        content: "";
                        display: block;
                        position: absolute;
                        height: .4rem;
                        width: .026667rem;
                        left: -0.186667rem;
                        background: #e1e1e1;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }
}
</style>
